<template>
  <div name="DataDirectory">
    <div class="s-Datastyle">
      <div class="left-content">
        <div class="menubox">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu :defaultActive="activeIndex" :unique-opened="true" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-submenu index="1">
                  <template slot="title">
                    <span>数据使用方式</span>
                  </template>
                  <el-menu-item index="1-1">
                    <el-radio-group v-model="parms.radioData" @change="DataChange">
                      <el-radio :label="d.value" v-for="d in radioDataList" :key="d.value">{{ d.name }}</el-radio>
                      <!--  -->
                    </el-radio-group>
                  </el-menu-item>
                </el-submenu>
                <el-submenu index="2">
                  <template slot="title">
                    <span>数据开放类型</span>
                  </template>
                  <el-menu-item index="2-1">
                    <el-radio-group v-model="parms.radioChoose" @change="ChooseChange">
                      <el-radio :label="d.value" v-for="d in radioChooseList" :key="d.value">{{ d.name }}</el-radio>
                      <!--  -->
                    </el-radio-group>
                  </el-menu-item>
                </el-submenu>
                <el-submenu index="3">
                  <template slot="title">
                    <span>主题资源</span>
                  </template>
                  <el-menu-item index="3-1">
                    <el-radio-group v-model="parms.radioThemeResource" @change="themeChange">
                      <el-radio :label="d.id" v-for="d in themeResourceList" :key="d.id">
                        <div class="numbox">
                          <p>
                            <span class="ell">{{ d.name }}</span>
                            <i>({{ d.num || 0 }})</i>
                          </p>
                        </div>
                      </el-radio>
                      <!--  -->
                    </el-radio-group>
                  </el-menu-item>
                </el-submenu>
                <el-submenu index="4">
                  <template slot="title">
                    <span>县区资源</span>
                  </template>
                  <el-menu-item index="4-1">
                    <el-radio-group v-model="parms.radioCounties" @change="CountiesChange">
                      <el-radio :label="d.id" v-for="d in CountiesList" :key="d.id">
                        <div class="numbox">
                          <p>
                            <span class="ell">{{ d.name }}</span>
                            <i>({{ d.num || 0 }})</i>
                          </p>
                        </div>
                      </el-radio>
                      <!--  -->
                    </el-radio-group>
                  </el-menu-item>
                </el-submenu>
                <el-submenu index="5">
                  <template slot="title">
                    <span>部门资源</span>
                  </template>
                  <el-menu-item index="5-1">
                    <el-radio-group v-model="parms.radioDepartments" @change="DepartmentsChange">
                      <el-radio :label="d.id" v-for="d in DepartmentList" :key="d.id">
                        <div class="numbox">
                          <p>
                            <span class="ell">{{ d.name }}</span>
                            <i>({{ d.num || 0 }})</i>
                          </p>
                        </div>
                      </el-radio>
                      <!--  -->
                    </el-radio-group>
                  </el-menu-item>
                </el-submenu>
              </el-menu>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="right-content">
        <div class="rightTitle">
          <p>
            共有
            <span>9323</span>
            个资源
          </p>
        </div>
        <div>
          <DataRihghtList :data="dataList" />
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="parms.pageNum"
            :page-size="parms.pageSize"
            layout="prev, pager, next, jumper"
            :total="9296"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import DataRihghtList from "./DataRihghtList";
export default {
  name: "DataDirectory",
  components: {
    DataRihghtList,
  },
  data() {
    return {
      activeIndex: "1-1",
      radioDataList: [
        { name: "全部", value: 0 },
        { name: "API", value: 1 },
        { name: "文件", value: 2 },
        { name: "数据集", value: 3 },
      ],
      radioChooseList: [
        { name: "全部", value: 0 },
        { name: "有条件开放", value: 1 },
        { name: "无条件开放", value: 2 },
      ],
      themeResourceList: [],
      CountiesList: [],
      DepartmentList: [],
      parms: {
        radioData: 0,
        radioChoose: 0,
        radioThemeResource: 0,
        radioCounties: 0,
        radioDepartments: 0,
        pageSize: 5,
        pageNum: 1,
      },
      dataList: [],
    };
  },
  created() {
    this.getThemeResourceList();
    this.getCountiesList();
    this.getDepartmentList();
    this.getDate();
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    DataChange(d) {
      this.parms.pageNum = 1;
      su.scroll.scrollTop();
      this.parms.radioData = d;
      this.getDate();
    },
    ChooseChange(d) {
      this.parms.pageNum = 1;
      su.scroll.scrollTop();
      this.parms.radioChoose = d;
      this.getDate();
    },
    themeChange(d) {
      this.parms.pageNum = 1;
      su.scroll.scrollTop();
      this.parms.radioThemeResource = d;
      this.getDate();
    },
    CountiesChange(d) {
      this.parms.pageNum = 1;
      su.scroll.scrollTop();
      this.parms.radioCounties = d;
      this.getDate();
    },
    DepartmentsChange(d) {
      this.parms.pageNum = 1;
      su.scroll.scrollTop();
      this.parms.radioDepartments = d;
      this.getDate();
    },
    getThemeResourceList() {
      this.$http
        .get("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/open/statistics/govList")
        .then(res => {
          if (res.code == 0) {
            this.themeResourceList = res.data;
          }
        })
        .catch(err => {
          console.log(err.message || "数据异常");
        });
    },
    getCountiesList() {
      this.$http
        .get("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/open/statistics/cityList")
        .then(res => {
          if (res.code == 0) {
            this.CountiesList = res.data;
          }
        })
        .catch(err => {
          console.log(err.message || "数据异常");
        });
    },
    getDepartmentList() {
      this.$http
        .get("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/open/statistics/depList")
        .then(res => {
          if (res.code == 0) {
            this.DepartmentList = res.data;
          }
        })
        .catch(err => {
          console.log(err.message || "数据异常");
        });
    },
    getDate() {
      this.$http
        .post("/iaiqsmde9fea569965ed56ab98ea0501752fe631902841e/open/dataPool/dataPoolPager", this.parms)
        .then(res => {
          if (res.code == 0) {
            this.dataList = res.data.rows;
          }
        })
        .catch(err => {
          console.log(err.message || "数据异常");
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      su.scroll.scrollTop();
      this.parms.pageNum = val;
      this.getDate();
    },
  },
};
</script>
